/* 项目查询 */
<template>
    <div style="background:#f8f8f9;">
        <Card :bordered="false">
            <p slot="title">项目查询</p>
            <p>
                <Row>
                    <Col span="2">
                    <p class="title-p">报告类型</p>
                    </Col>
                    <Col span="12" >
                    <span class="content-p">全部</span>
                    <span class="content-p">报告表</span>
                    <span class="content-p">报告书</span>
                    <span class="content-p">现状评估报告</span>
                    <span class="content-p">规划</span>
                    <span class="content-p">验收</span>
                    </Col>
                </Row>
                <Row>
                    <Col span="2">
                    <p class="title-p">选择时间</p>
                    </Col>
                    <Col span="12">
                    <span class="content-p">不限</span>
                    <span class="content-p">近一周</span>
                    <span class="content-p">近一个月</span>
                    <span class="content-p">近半年</span>
                    <span class="content-p">近一年</span>
                    </Col>
                </Row>

                <Row>
                    <Col span="2">
                    <p class="title-p">选择地区</p>
                    </Col>
                    <Col span="20">
                    <span class="content-p">全国</span>
                    <span class="content-p">安徽</span>
                    <span class="content-p">北京</span>
                    <span class="content-p">福建</span>
                    <span class="content-p">甘肃</span>
                    <span class="content-p">安徽</span>
                    <span class="content-p">北京</span>
                    <span class="content-p">福建</span>
                    <span class="content-p">甘肃</span>
                    <span class="content-p">安徽</span>
                    <span class="content-p">北京</span>
                    <span class="content-p">福建</span>
                    <span class="content-p">甘肃</span>
                    <span class="content-p">安徽</span>
                    <span class="content-p">北京</span>
                    <span class="content-p">福建</span>
                    <span class="content-p">甘肃</span>
                    <span class="content-p">安徽</span>
                    <span class="content-p">北京</span>
                    <span class="content-p">福建</span>
                    <span class="content-p">甘肃</span>

                    </Col>
                </Row>
                <Row style="padding-bottom:10px;">
                    <Col span="2">
                    <p class="title-p">&nbsp;</p>
                    </Col>
                    <Col span="22">
                    <Row>
                        <Col span="2">
                        <Select v-model="model1" style="width:100%" placeholder="省份" @on-change="change">
                            <Option v-for="item in cityList" :value="item.name" :key="item.name">{{ item.name }}</Option>
                        </Select>
                        </Col>
                        <Col span="2" offset="1">
                        <Select v-model="model2" style="width:100%" placeholder="城市">
                            <Option v-for="item in cities" :value="item.name" :key="item.name">{{ item.name }}</Option>
                        </Select>
                        </Col>
                        <Col span="6" offset="13">
                        <Input search enter-button placeholder="请输入关健词" @on-search='search' v-model="searchText"/>
                        </Col>
                    </Row>
                    </Col>
                </Row>
                <Row>
                    <Col>
                    <Table border :columns="columns1" :data="data1"></Table>
                    <div style="margin: 10px;overflow: hidden">
                        <div style="float: right;">
                            <Page 
                                :total="pageTotalQuery"
                                :current="pageNumQuery"
                                :page-size="pageSizeQuery"
                                show-total
                                show-elevator
                                show-sizer
                                @on-change="queryPage"
                                @on-page-size-change='queryPageSize'>
                            </Page>
                        </div>
                    </div>
                    </Col>
                </Row>
            </p>
        </Card>
        <Card :bordered="false" style="margin-top:20px;">
            <p slot="title">已完成项目</p>
            <p>
                <Row style="margin-bottom:20px;">
                    <Col span="2" style="height:36px;line-height:36px;">
                    <p class="title-p">日期范围</p>
                    </Col>
                    <Col span="22">
                    <Row>
                         <Col span="4">
                            <DatePicker type="date" placeholder="开始时间"  size='large'></DatePicker>
                        </Col>
                        <Col span="1" style="text-align:center;">
                            <span >—</span>
                        </Col>
                        <Col span="4">
                            <DatePicker type="date" placement="bottom-end" placeholder="结束时间"  size='large'></DatePicker>
                        </Col>
                        <Col span="15">
                            <Row>
                                <Col style="border:1px #e8eaec solid;text-align: center;padding:6px 0" span="8">总计</Col>
                                <Col style="border:1px #e8eaec solid;text-align: center;padding:6px 0" span="8">30个报告书20个报告表</Col>
                                <Col style="border:1px #e8eaec solid;text-align: center;padding:6px 0" span="8">绩效8000</Col>
                            </Row>
                        </Col>
                    </Row>
                    </Col>
                </Row>
                <Row>
                    <Col>
                    <Table border :columns="columns2" :data="data2"></Table>
                    <div style="margin: 10px;overflow: hidden">
                        <div style="float: right;">
                            <Page 
                                :total="pageTotalComplete"
                                :current="pageNumComplete"
                                :page-size="pageSizeComplete"
                                show-total
                                show-elevator
                                show-sizer
                                @on-change="completePage"
                                @on-page-size-change='completePageSize'>
                            </Page>
                        </div>
                    </div>
                    </Col>
                </Row>
            </p>
        </Card>
    </div>
</template>

<script>
    import CityList from "../../libs/city.js"

    export default {
        data() {
            return {
                searchText: '',
                //项目查询
                pageTotalQuery: 0,
                pageNumQuery: 1,
                pageSizeQuery: 10,  
                //项目完成
                pageTotalComplete: 0,
                pageNumComplete: 1,
                pageSizeComplete: 10,  

                cityList: CityList,
                cities: [],
                model1: "",
                model2: "",
                columns1: [
                    {
                        align: "center",
                        title: "项目名称",
                        key: "Project_name"
                    },
                    {
                        align: "center",
                        title: "建设单位",
                        key: "Build_unit",
                        sortable: true
                    },
                    {
                        align: "center",
                        title: "报告类型",
                        key: "Report_type",
                        sortable: true
                    },
                    {
                        align: "center",
                        title: "地区",
                        key: "Build_address",
                        sortable: true
                    },
                    {
                        align: "center",
                        title: "修改日期",
                        key: "Perject_time",
                    },
                ],
                data1: [{
                        date: "0000000",
                        unit: "某某某某项目",
                        address: "某某某某",
                        class: "报告书",
                        alertDay: "2018-08-24",
                        state: "资料收集"
                    },
                    {
                        date: "0000000",
                        unit: "某某某某项目",
                        address: "某某某某",
                        class: "报告书",
                        alertDay: "2018-08-24",
                        state: "资料收集"
                    },
                    {
                        date: "0000000",
                        unit: "某某某某项目",
                        address: "某某某某",
                        class: "报告书",
                        alertDay: "2018-08-24",
                        state: "资料收集"
                    },
                    {
                        date: "0000000",
                        unit: "某某某某项目",
                        address: "某某某某",
                        class: "报告书",
                        alertDay: "2018-08-24",
                        state: "资料收集"
                    },
                    {
                        date: "0000000",
                        unit: "某某某某项目",
                        address: "某某某某",
                        class: "报告书",
                        alertDay: "2018-08-24",
                        state: "资料收集"
                    },
                    {
                        date: "0000000",
                        unit: "某某某某项目",
                        address: "某某某某",
                        class: "报告书",
                        alertDay: "2018-08-24",
                        state: "资料收集"
                    },
                    {
                        date: "0000000",
                        unit: "某某某某项目",
                        address: "某某某某",
                        class: "报告书",
                        alertDay: "2018-08-24",
                        state: "资料收集"
                    },
                    {
                        date: "0000000",
                        unit: "某某某某项目",
                        address: "某某某某",
                        class: "报告书",
                        alertDay: "2018-08-24",
                        state: "资料收集"
                    },
                    {
                        date: "0000000",
                        unit: "某某某某项目",
                        address: "某某某某",
                        class: "报告书",
                        alertDay: "2018-08-24",
                        state: "资料收集"
                    },
                    {
                        date: "0000000",
                        unit: "某某某某项目",
                        address: "某某某某",
                        class: "报告书",
                        alertDay: "2018-08-24",
                        state: "资料收集"
                    },
                    {
                        date: "0000000",
                        unit: "某某某某项目",
                        address: "某某某某",
                        class: "报告书",
                        alertDay: "2018-08-24",
                        state: "资料收集"
                    },
                    {
                        date: "0000000",
                        unit: "某某某某项目",
                        address: "某某某某",
                        class: "报告书",
                        alertDay: "2018-08-24",
                        state: "资料收集"
                    },
                    {
                        date: "0000000",
                        unit: "某某某某项目",
                        address: "某某某某",
                        class: "报告书",
                        alertDay: "2018-08-24",
                        state: "资料收集"
                    },
                    {
                        date: "0000000",
                        unit: "某某某某项目",
                        address: "某某某某",
                        class: "报告书",
                        alertDay: "2018-08-24",
                        state: "资料收集"
                    }
                ],
                columns2: [{
                        type: "index",
                        align: "center",
                        title: "序号",
                        key: "num",
                    },
                    {
                        align: "center",
                        title: "项目名称",
                        key: "Project_name"
                    },
                    {
                        align: "center",
                        title: "报告类型",
                        key: "Report_type",
                    },
                    {
                        align: "center",
                        title: "地区",
                        key: "Build_area_code",
                    },
                    {
                        align: "center",
                        title: "审批部门",
                        key: "Project_approval_unit",
                    },
                    {
                        align: "center",
                        title: "绩效",
                        key: "Contract_amount",
                    },
                    
                ],
                data2: []
            };
        },
        mounted() {
            this.projectQuery()         //项目查询
            this.completeProject()      //完成项目    
        },
        methods: {
            search() {
                console.log("id或模糊查询项目"+this.searchText)
                
            },
            // 选择省份
            change(val){
                for(var i=0; i<this.cityList.length; i++){
                    if(val == this.cityList[i].name ){
                        this.cities = this.cityList[i].cityList
                    }
                }
            },
            // 项目查询
            projectQuery() {
                var url = "/projectInformation/findAllProject"
                axios.post(url,{
                    pageIndex: this.pageNumQuery-1,
                    pageSize: this.pageSizeQuery
                }).then((res)=>{
                    console.log(res)
                    this.data1 = res.projectList
                    this.pageTotalQuery = res.countProjectList
                }).catch((err)=>{
                    console.log(err)
                })
            },
            queryPage(value) {
                this.pageNumQuery = value
                this.projectQuery();
            },
            queryPageSize(value) {
                this.pageSizeQuery = value
                this.projectQuery();
            },
            // 项目完成
            completeProject() {
                var url = "/projectInformation/findAllProject"
                axios.post(url,{
                    pageIndex: this.pageNumQuery-1,
                    pageSize: this.pageSizeQuery
                }).then((res)=>{
                    console.log(res)
                    this.data2 = res.projectList
                    this.pageTotalComplete = res.countProjectList
                }).catch((err)=>{
                    console.log(err)
                })
            },
            completePage(value) {
                this.pageNumComplete = value
                this.completeProject();
            },
            completePageSize(value) {
                this.pageSizeComplete = value
                this.completeProject();
            },
            //  
        }

    };
</script>

<style scoped lang="less">
    .title-p {
        font-size: 14px;
        color: #17233d;
        font-weight: 700;
    }
    .content-p {
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        color: #999;
        margin-right: 10px;
    }
</style>